import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import App2 from './src/App2';


console.log('首次挂载');
let componentInstance = render((<App2 />), document.querySelector('#root'));

//<h1>Hello World</h1> 是 ReactElement。
//一个不可变的普通对象，它描述了一个组件的实例或一个DOM节点。它只包含组件的类型（比如h1、或者APP）、属性以及子元素等信息。
//ReactElement不是组件的实例，不能在ReactElement中调用React组件的任何方法。它只是告诉React你想在屏幕上显示什么。
// console.log(<h1>Hello World</h1>);
// console.log(<App/>);

window.renderComponent=()=>{
    console.log('挂载');
    componentInstance=render(<App2/>, document.getElementById('root'));
};
window.setState=()=>{
    console.log('更新');
    componentInstance.setState({foo:'bar'});
};
window.unmountComponentAtNode=()=>{
    console.log('卸载');
    unmountComponentAtNode(document.getElementById('root'));
};


//ReactElement的两种类
//1. 当ReactElement的type属性是一个字符串时，它表示了一个DOM节点
// console.log(<h1>Hello World</h1>);

//2. type属性是一个表示组件的函数或类时，它表示了一个组件
// console.log(<App/>);


// React组件的渲染流程！！！
//
// 当React遇到表示组件的ReactElment时，
// 它会给这个ReactElement表示的组件一些props （有时候也包括context），
// 然后问该组件渲染的ReactElement是什么。如果渲染的仍然是表示组件的ReactElment，那么将会一直问下去，
// 直到了解所有组件要渲染的DOM元素为止。
// 此时，React就可以使用react-dom或react-native这样的渲染模块来执行渲染了

// 对一个组件而言，props就是输入，ReactElement就是输出。这个特性不仅清晰地表述了组件把数据渲染成视图的过程，而且还方便了性能优化。
// 比如，假设你的某个组件有一个特别庞大的DOM树，如果每次更新都要重新渲染，那么势必会极大地消耗性能。
// 但是如果在渲染前，先判断一下输入的props是否改变，然后再决定是否渲染的话，将会有效地避免不必要的渲染，进而提升性能。

// ReactElement在React中非常重要。在编写React组件时，开发者大部分时间都会花在设计编写ReactElment所组成的元素树上面。

console.log('组件，ReactElement与组件实例');
console.log('组件:',App2); //组件是一个函数或类，它决定了如何把数据变为视图
console.log('ReactElement(DOM节点)', <App2/>); //ReactElement只是一个普通对象，它一个描述了组件实例或DOM节点；
console.log('组件实例', componentInstance); //组件实例则是组件类的实例化对象






